<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #app {
        margin: 50px auto;
        width: 600px;
      }
      fieldset {
        border: 1px solid purple;
        margin-bottom: 20px;
      }
      fieldset input {
        width: 200px;
        height: 30px;
        margin: 10px 0;
      }
      table {
        width: 600px;
        border: 2px solid purple;
        text-align: center;
      }
      thead {
        background-color: purple;
        color: #fff;
      }
      tbody tr:nth-child(odd){
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--上部分-->
      <fieldset>
        <legend>撩课信息录入系统(Vue版)</legend>
        <div>
          <label>姓名:<input type="text" placeholder="请输入姓名" v-model.trim="newUser.name" /></label>
        </div>
        <div>
          <label>年龄:<input type="number" placeholder="请输入年龄" v-model.number="newUser.age"/></label>
        </div>
        <div>
          <label>
            性别:
            <select v-model="newUser.sex">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </label>
        </div>
        <div>
          <label>手机:<input type="number" placeholder="请输入手机号码" v-model.number="newUser.phone"/></label>
        </div>
        <button @click="addUser">创建新用户</button>
      </fieldset>
      <!--下部分-->
      <table>
        <thead>
          <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机</td>
            <td>删除</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user ,index) in users">
            <td>{{user.name}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.age}}</td>
            <td>{{user.phone}}</td>
            <td>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="../js/vue.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            users: [
              { name: "张三", age: 20, sex: "男", phone: "18919988999" },
              { name: "李四", age: 30, sex: "女", phone: "18912121212" },
              { name: "王五", age: 40, sex: "男", phone: "18912222229" },
              { name: "赵六", age: 10, sex: "女", phone: "18921218999" },
            ],
            newUser:{name:"",age:"",sex:"男",phone:""},
          };
        },
        methods: {
          del(index) {
            this.users.splice(index, 1);
          },
          addUser(){
            const {name, age, sex, phone} = this.newUser;
            //1. 验证数据
            if(!name || !age || !sex || !phone){
              alert('输入的内容不完整');
              return;
            }
            //2. 添加数据
            this.users.unshift(this.newUser);

            //3. 清空输入框内容
            this.newUser = {name:"",age:"",sex:"男",phone:""};
            return;
          }
        },
      }).mount("#app");
    </script>
  </body>
</html>
